import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import { WorkspaceBaseInfo } from './workspaceAPI'
import style from './WorkspaceItem.module.css'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
import { Button } from 'antd'
import classNames from 'classnames'
import { ModalOkHandler } from './Main'

interface WorkspaceFucProps {
  onDel: Function
  onSelect: Function
  onOpenModal: Function
}

type workspaceItemProp = WorkspaceBaseInfo & WorkspaceFucProps

const WorkspaceItem = (info: workspaceItemProp) => {
  const [btnsVisible, setBtnsVsible] = useState(false)

  const handleClickToggleBtn = () => {
    setBtnsVsible(preState => !preState)
  }

  const _getTimeStr = (timeStr: string) => {
    const time = new Date(timeStr)
    return `${time.getFullYear()}/${time.getMonth() + 1}/${time.getDate()} 诞生`
  }

  const toggleClasses = classNames(style.toggle, {
    [style.selected]: btnsVisible,
  })

  const buttonsClasses = classNames(style.buttons, {
    hidden: !btnsVisible,
  })

  const handleClickChangeBtn = () => {
    info.onSelect(info._id)
    info.onOpenModal(ModalOkHandler.ModifyName)
  }

  return (
    <div className={style.container}>
      <Link to={`/workspace/${info._id}`}>
        <div className={style.main}>{info.name}</div>
      </Link>
      <div className={style.time}>{_getTimeStr(info.createdAt)}</div>
      <span className={toggleClasses} onClick={handleClickToggleBtn}>
        ···
      </span>
      <div className={buttonsClasses}>
        <Button
          className={style.button}
          type="primary"
          shape="circle"
          size="small"
          icon={<EditOutlined />}
          onClick={handleClickChangeBtn}
        />

        <Button
          className={style.button}
          type="primary"
          shape="circle"
          size="small"
          icon={<DeleteOutlined />}
          onClick={e => {
            info.onDel(info._id)
          }}
        />
      </div>
    </div>
  )
}

export default WorkspaceItem
